<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('信用大厅')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">

    <h1 th:text="${viewTitle}"></h1>
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 select-table table-bordered">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: summernote-js" />
<script th:inline="javascript">
		var prefix = ctx + "system/grade";
		var viewGradeId = [[${viewGradeId}]];
        console.log(viewGradeId);
        $(function() {
		    ajaxTable([[${viewGradeId}]]);
		});

		// 动态获取列
        function ajaxTable(gradeId) {
        	var url = ctx + "system/grade/getTemplateById";
        	//$('#bootstrap-table').empty();
        	$('#bootstrap-table').bootstrapTable('destroy');

            $.modal.loading("正在查询中，请稍后...");
            $.post(url, {"id": gradeId}, function(result) {
                if (result.code == web_status.SUCCESS) {
                	setColumns(result.data,gradeId);
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
                $.modal.closeLoading();
            });
        }
      	// 设置列
        function setColumns(list,gradeId) {
        	var columns = [];
        	list.forEach(function(item) {
        	    if($.common.equals('status',item.field)){
        	    	columns.push({
        	    		field : item.field,
    					title : item.title,
                        align: 'center',
                        formatter: function(value, row, index) {
                        	return $.table.selectDictLabel(datas, value);
                        }
        	    	})
        	    }else if($.common.equals('weight',item.field)){
        	    	columns.push(
						{
							field: 'weight',
							title: '权重(%)',
							formatter: function (value, row, index) {
								if(typeof value === 'undefined' || value === null || value === ""){
									return ''
								}else{
									return value+'%';
								}
							}
						},
					);
        	    } else {
        	    	columns.push({
        	    		field : item.field,
    					title : item.title
        	    	})
        	    }
        	});


        	initTable(columns,gradeId);

        }
      	// 刷新表格
        function refreshTable(columns) {
        	var options = {
        		columns: columns
        	};
        	$("#" + table.options.id).bootstrapTable('refreshOptions',options);
        }
      	// 初始化表格
        function initTable(columns,gradeId){
        	var options = {
        		url: ctx + "system/grade/getGradeItemsByGradeId?id="+gradeId,
            	showSearch: false,
            	showRefresh: false,
            	showToggle: false,
            	showColumns: false,
            	pagination:false,

            	columns: columns,
            	onLoadSuccess : function(data) {
                    var data = $('#bootstrap-table').bootstrapTable(
                            'getData', true);
                    //合并单元格
                    columns.forEach(function(item) {
                        if($.common.equals('firstColumn',item.field)){
                            mergeCells($('#bootstrap-table'), data, "firstColumn", ["firstColumn"]);
                        } else if($.common.equals('secondColumn',item.field)){
                            mergeCells($('#bootstrap-table'), data, "secondColumn", ["firstColumn","secondColumn"]);
                        }else if($.common.equals('threeColumn',item.field)){
                            mergeCells($('#bootstrap-table'), data, "threeColumn", ["firstColumn","secondColumn","threeColumn"]);
                        }else if($.common.equals('fourColumn',item.field)){
                            mergeCells($('#bootstrap-table'), data, "fourColumn", ["firstColumn","secondColumn","threeColumn","fourColumn"]);
                        }else if($.common.equals('fiveColumn',item.field)){
                            mergeCells($('#bootstrap-table'), data, "fiveColumn", ["firstColumn","secondColumn","threeColumn","fourColumn","fiveColumn"]);
                        }else if($.common.equals('sixColumn',item.field)){
                            mergeCells($('#bootstrap-table'), data, "sixColumn", ["firstColumn","secondColumn","threeColumn","fourColumn","fiveColumn","sixColumn"]);
                        }
                    });
                }
            };
            $.table.init(options);
        }



        /**
		 * 合并单元格
		 * @param data 原始数据(在服务端完成排序)
		 * @param fieldName 合并属性名称
		 * @param colspan 合并列
		 * @param target 目标表格对象
		 */
		function mergeCells(target, data, fieldName, beforFields) {
			//声明一个map计算相同属性值在data对象出现的次数和
			var sortMap = {};
			for (var i = 0; i < data.length; i++) {
                var key='';
				for(var j=0;j< beforFields.length;j++){
					var beforField = beforFields[j];
					key += data[i][beforField];
				}

                if (sortMap.hasOwnProperty(key)) {
                    sortMap[key] = sortMap[key] * 1 + 1;
                } else {
                    sortMap[key] = 1;
                }
			}
			for ( var prop in sortMap) {
				console.log(prop, sortMap[prop])
			}
			var index = 0;
			for ( var prop in sortMap) {
				var count = sortMap[prop] * 1;
				$(target).bootstrapTable('mergeCells', {
					index : index,
					field : fieldName,
					colspan : 1,
					rowspan : count
				});
				index += count;
			}
		}

	</script>
</body>

</html>